<template>
  <h1>n的值:{{n.y}}</h1>
  <button @click="n.y++">点我n++</button>
  <hr/>
  <h1>{{person}}</h1>
  <button @click="person.name = person.name + '~'">点击修改名字</button>
  <button @click="person.age++">点击修改名字</button>
  <button @click="person.job.j1.salary++">点击涨薪</button>
  <button @click="showRawPerson">点我输出最原始的person</button>
  <button @click="addCar">点我添加座驾</button>
  <button @click="person.car.name += '!'">点我修改座驾名字</button>
  <button @click="person.car.price++">点我修改座驾价格</button>
</template>

<script>
import {reactive,ref,toRaw,markRaw} from "vue";
export default {
  name: "my-demo",
  setup() {
    let person =reactive({
      name:"张三",
      age:'18',
      job:{
        j1:{
          salary:5
        }
      }
    });
    let n = ref({
      y:0
    });

    function showRawPerson () {
      //获得数据的最原始的person
      const p = toRaw(person);
      console.log('最原始的person',p);
    }

    function addCar() {
      const car = {name:'奔驰',price:50}
      person.car = markRaw(car); //标记对象不能修改
    }

    return{
      person,
      n,
      showRawPerson,
      addCar
    }
  }
}
</script>

<style scoped>

</style>